<template>
  <div class="water-use-recharge">
    <c-title text="充值"></c-title>
    <div class="head">
      <span style="font-size: 1rem;">套餐办理</span>
      <span class="tips">线上直接办理，立即生效</span>
    </div>

    <div class="box">
      <div class="box-item" v-for="(item, i) in list" :key="i">
        <div class="img">
          <img :src="item.thumb" style="width: 100%; height: 100%;" />
        </div>
        <div class="flex-1 left">
          <div>{{ item.title }}</div>
          <div class="account">实际到账{{ item.price }}元</div>
          <div class="flex-between-center">
            <span class="c-EF5452" style="font-size: 1rem;">{{ $i18n.t('money') }}{{ item.paid_price }}</span>
            <span class="buy" @click="buy(item.id)">购买</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      current_page: 1,
      last_page: 1,
      list: [],
      thumb:""
    }
  },
  activated() {
    this.getData();
  },
  methods: {
    buy(option_id) {
      $http.post('order.create', { goods: [{ goods_id: this.id, total: 1, option_id }] }).then(res => {
        if (res.result) {
          this.thumb = res.data.thumb;
          let order_ids = res.data.order_ids;
          this.$router.push(this.fun.getUrl("orderpay", { order_ids}));
        } else {
          this.$toast(res.msg);
        }
      })
    },
    getData() {
      $http.get('plugin.water-machine.frontend.consumer.package-goods.index').then(res => {
        if (res.result) {
          this.id = res.data.id;
          this.list = res.data.water_machine_package
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.water-use-recharge {
  .box {
    padding: 0.4688rem;
  }

  .c-EF5452 {
    color: #ef5452;
  }

  .buy {
    color: #fff;
    background: #ff695e;
    padding: 0.2813rem 0.9375rem;
    border-radius: 3.125rem;
    font-size: 0.8125rem;
  }

  .account {
    font-size: 0.75rem;
    color: #9f9f9f;
    margin-top: 0.125rem;
    margin-bottom: 0.6563rem;
  }

  .flex-1 {
    flex: 1;
  }

  .left {
    text-align: left;
  }

  .flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
  }

  .box-item {
    border-radius: 0.625rem;
    margin-bottom: 0.625rem;
    padding: 0.625rem;
    background: #fff;
    display: flex;
  }

  .box-item .img {
    width: 5.625rem;
    height: 5.625rem;
    overflow: hidden;
    margin-right: 0.625rem;
    border-radius: 0.625rem;
  }

  .head {
    margin-top: 0.875rem;
    text-align: left;
    margin-left: 1rem;
    margin-bottom: 0.8125rem;
  }

  .tips {
    margin-left: 0.625rem;
    font-size: 0.75rem;
    color: #7e7e7e;
  }
}
</style>